<template>
	<view>
		<view class="item-box">
			<view class="item" v-for="(item,index) in roomList" :key="item.id">
				<image :src="'https://smsyqp.oss-cn-shenzhen.aliyuncs.com'+ item.image" mode="包间管理"></image>
				<view class="rooname">{{item.name}}</view>
				<view v-if="item.status == 1" class="daidasao">{{item.status_str}}</view>
				<view v-else class="roomstatic">{{ item.status_str }}</view>
			</view>
		</view>
		<!-- <button class="btn" @click="goPath('/pages/addprivateroom/addprivateroom')">添加包间</button> -->
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		computed: {
			...mapGetters(['activeStore']),
		},
		data() {
			return {
				// storeId: uni.getStorageSync('storeListId')[0],
				pages: 1,
				roomList: [],
				last_page: null
			}
		},
		onReachBottom() {
			if (this.pages < this.last_page) {
				this.pages += 1;
				this.getRoomList();
			}
		},
		onLoad() {
			this.getRoomList();
		},
		methods: {
			getRoomList() {
				const { activeStore: { id } } = this
				if (id === -1) {
					this.$toast({ title: '您没有选择店铺', icon: 'error', time: 2000 });
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
					return
				}
				this.https('/room/lists', {
					store_id: id,
					page: this.pages
				}).then(res => {
					if (res.data && res.data.data && res.data.data.length) {
						res.data.data.sort((a, b) => {
							return a.id - b.id
						})
					}
					if (this.pages == 1) {
						this.roomList = res.data.data;
					} else {
						this.roomList = this.roomList.concat(res.data.data);
					}
					this.last_page = res.data.last_page;
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F0F2F5;
		padding-bottom: 50rpx;
	}

	.roomstatic {
		width: 168rpx;
		height: 48rpx;
		text-align: center;
		color: #FFF;
		line-height: 48rpx;
		background: #00809F;
		border-radius: 24rpx;
	}

	.daidasao {
		width: 168rpx;
		height: 48rpx;
		text-align: center;
		color: #FFF;
		line-height: 48rpx;
		background: #FF9600;
		border-radius: 24rpx;
	}

	.rooname {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 700;
		color: #000000;
	}

	.item-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 320rpx;
		height: 400rpx;
		background-color: #FFF;
		border-radius: 16rpx;
		margin-bottom: 48rpx;
		box-shadow: 0px 0px 12px 0px rgba(189, 189, 189, 0.5);
		margin: 10rpx 27rpx;
	}

	.item image {
		width: 279rpx;
		height: 200rpx;
	}

	.item view {
		margin-top: 40rpx;
	}

	.btn {
		width: 630rpx;
		height: 95rpx;
		background: #00809F;
		border-radius: 16rpx;
		color: #FFF;
		margin-top: 200rpx;
		font-size: 32rpx;
		line-height: 95rpx;
	}
</style>